<template>
    <div class="body">
        <div class="cmain">
            <ul>
                <li>
                    <div class="childehead">
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>个人主页</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </li>
                <li>
                    <div style="height:2px;width：90%;background-color:#99a9bf"></div>
                </li>
            </ul>
            <ul class="child">
                <li>
                    <div>
                        <span>ID</span>
                    </div>
                </li>
                <li>
                    <div>
                        <el-input placeholder="请输入教工号" v-model="id"></el-input>
                    </div>
                </li>
                <li>
                    <div>
                        <span>昵称</span>
                    </div>
                </li>
                <li>
                    <div>
                        <el-input placeholder="请输入昵称"></el-input>
                    </div>
                </li>
                <li>
                    <div>
                        <span>性别</span>
                    </div>
                </li>
                <li>
                    <div>
                        <el-radio v-model="radio" label="1">男</el-radio>
                        <el-radio v-model="radio" label="2">女</el-radio>
                    </div>
                </li>
                <li>
                    <div>
                        <span>年龄</span>
                    </div>
                </li>
                <li>
                    <div>
                        <el-input placeholder="请输入年龄"></el-input>
                    </div>
                </li>
                <li>
                    <div>
                        <span>修改密码</span>
                    </div>
                </li>
                <li>
                    <div>
                        <el-input v-model="oldpassword" placeholder="请输入旧密码" show-password></el-input>
                    </div>
                </li>
                <li>
                    <div>
                        <el-input v-model="newpassword" placeholder="请输入新密码" show-password></el-input>
                    </div>
                </li>
                <li>
                    <div>
                        <el-button type="primary" @click="newpass">更新信息</el-button>
                    </div>
                </li>
            </ul>
            <div class="right">
                <div>
                    <span>个人简介</span>
                </div>
                <div class="textarea">
                    <el-input type="textarea" placeholder="请输入内容" v-model="textarea" rows="19.5" maxlength="500"></el-input>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      radio: '1',
      textarea: '',
      id: '2018081603',
      newpassword: '11111',
      oldpassword: '11111'
    }
  },
  methods: {
    async newpass () {
      this.$http.defaults.headers.post['Content-Type'] = 'application/json'
      await this.$http.post('/user/changePassword', {
        id: this.id,
        oldpassword: this.oldpassword,
        newpassword: this.newpassword
      }).then(res => {
        if (res.code === 200) return this.$message.success('信息更新成功~~')
        if (res.code !== 200) {
          return this.$message.error('信息更新失败~~')
        }
        console.log(res.data)
      }, err => {
        console.log(err)
      })
    }

  }

}
</script>

<style lang="less" scoped>
.childehead{
  position: relative;
  top: -20px;
  left: -16px;
}
.body{
    height: 100%;
    width: 100%;
    .cmain{
        height: 80%;
        width: 96%;
        position: relative;
        left: 2%;
        top: -20px;
        .right{
            height: 65%;
            width: 50%;
            position: absolute;
            top: 16%;
            left: 50%;
        }
        .textarea{
            position: relative;
            top: 15px;
            height: 92%;
            overflow: auto;
        }
    }
    .child li div{
        width: 60%;
    }
    .cmain ul li{
        padding-top: 20px;
        list-style: none;
    }
}

</style>
